<template>
    <div>
        <button class="btn btn-outline-info" @click="back()">
            <i class="fa fa-arrow-left"></i>
            回到上一页
        </button>
        <button class="btn btn-outline-primary" v-if="ownBlog" @click="edit()">
            <i class="fa fa-pencil-square-o"></i>
            编辑
        </button>
        <button style="float: right" class="btn btn-danger" v-if="ownBlog" @click="deletePost()">
            <i class="fa fa-minus-square-o"></i>
            删除
        </button>
        <h2 class="text-center">{{ post.title }}</h2>
        <div class="post">
            <div class="markdown-body" v-html="post.content"></div>
        </div>
        <div class="col-md-12">
            <i :class="clickLikeClass" @click="clickLike()"></i>
            <span style="font-size: 16px"></span>
            <i :class="openCommentEditorClass" @click="writeComment()"></i>
        </div>
        <div class="comment">
            <div style="font-size: 20px;">
                <div class="d1">
                    <i v-if="likesList.length > 0" class="fa fa-thumbs-up"></i>&nbsp;
                    <span v-for="(likes,i) in likesList">
                        <a href="javascript:void(0)" v-on:mouseover="showCard(likes.user.id)">{{ likes.user.name }}</a>
                        <span v-if="i !== likesList.length-1">、</span>
                    </span>
                    <div id="card" class="card" v-if="cardShow" v-on:mouseleave="hideCard()">
                        <div class="flex">
                            <div class="title-img">
                                <img v-if="loginUser.photo" :src="hoverUser.photo" style="width: 100px;height: 100px"
                                     class="title-img img-fluid" alt="...">
                                <img v-if="!loginUser.photo" src="/static/image/img-4.jpg" style="border-radius: 50%"
                                     class="card-img-top" alt="...">
                            </div>
                            <div class="title-text">
                                <h5 class="text-center">{{ hoverUser.name }}</h5>
                                等级：<span :class="textColorClass">LV{{ expInfo.level }}</span><br/>
                                经验值：<span :class="textColorClass">{{ expInfo.exp }}/{{ expInfo.maxExp }}</span>
                                <div class="progress" style="width: 95%;">
                                    <div :class="barColorClass" class="progress-bar" role="progressbar"
                                         :style="{width: expInfo.percent + '%'}" :aria-valuenow="expInfo.percent"
                                         aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">

                        </div>
                    </div>
                </div>
            </div>

            <p v-show="comments !== 0">
                <i class="fa fa-comments"></i>
                {{ comments }}条评论回复
            </p>

            <div class="col-md-11">
                <comment :list="commentList"></comment>
                <br/>
            </div>

            <div class="form-group">
                <div class="input-group" v-show="showCommentEditor">
                    <input class="form-control" placeholder="评论" v-model="comment.content">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" @click="publishComment()">发布</button>
                    </div>
                </div>
                <div class="input-group" v-show="showReplyEditor">
                    <input class="form-control" :placeholder="'回复'+replyName+':'" v-model="reply.content">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" @click="publishReply">发布</button>
                    </div>
                </div>
            </div>

        </div>


    </div>
</template>

<script>
import Comment from "../../components/Comment";

export default {
    name: "PostDetail",
    components: {Comment},
    data() {
        return {
            post: {},
            ownBlog: false,
            loginUser: {},
            // 显示评论框
            showCommentEditor: false,
            // 显示回复框
            showReplyEditor: false,
            // 回复的人
            replyName: '',
            // 回复的人的id,
            replyUserId: 0,
            // 评论数
            comments: 0,
            // 是否点赞
            like: false,
            likesList: [],
            // 评论列表
            commentList: [],
            // 当前评论内容
            comment: {},
            // 当前回复内容
            reply: {},

            expInfo: {
                level: 2,
                exp: 201,
                maxExp: 500,
                percent: 1
            },

            hoverUser: {},
            cardShow: false
        };
    },
    computed: {
        openCommentEditorClass() {
            return {
                'fa fa-comment comment-i': this.showCommentEditor === true,
                'fa fa-comment-o comment-i': this.showCommentEditor === false,
            }
        },
        clickLikeClass() {
            return {
                'fa fa-thumbs-o-up thumb-i': this.like === false,
                'fa fa-thumbs-up thumb-i text-danger': this.like === true
            }
        },
        barColorClass() {
            return {
                'bg-secondary': this.expInfo.level === 1,
                'bg-purple': this.expInfo.level === 2,
                'bg-primary': this.expInfo.level === 3,
                'bg-info': this.expInfo.level === 4,
                'bg-success': this.expInfo.level === 5,
                'bg-warning': this.expInfo.level === 6,
                'bg-danger': this.expInfo.level >= 7
            }
        },
        textColorClass() {
            return {
                'text-secondary': this.expInfo.level === 1,
                'text-purple': this.expInfo.level === 2,
                'text-primary': this.expInfo.level === 3,
                'text-info': this.expInfo.level === 4,
                'text-success': this.expInfo.level === 5,
                'text-warning': this.expInfo.level === 6,
                'text-danger': this.expInfo.level >= 7
            }
        }
    },
    mounted() {
        let _this = this;
        let postId = this.$route.query.id;
        _this.loginUser = Tool.getLoginUser();
        if (postId) {
            _this.getPostDetail(postId);
        } else {
            _this.$router.push("/error");
        }
        // 加载点赞
        _this.loadLikes(postId);

    },
    methods: {
        getExpAndLevel(id) {
            let _this = this;
            if ((typeof (id) == "undefined")) {
                return;
            }
            _this.$ajax.get(process.env.VUE_APP_SERVER + '/user/exp/get-user-exp/' + id).then(response => {
                let resp = response.data;
                if (resp.success) {
                    let expInfo = resp.content;
                    _this.expInfo = expInfo;
                    let percent = (expInfo.exp - expInfo.lastMaxExp) / (expInfo.maxExp - expInfo.lastMaxExp) * 100;
                    _this.expInfo.percent = percent;
                }
            })
        },
        hideCard() {
            let _this = this;
            setTimeout(function () {
                _this.cardShow = false;
            },500)
        },
        showCard(userId) {
            this.getUser(userId);
            this.getExpAndLevel(userId);
            this.cardShow = true;
        },
        /**
         * 通过userId获得用户信息
         */
        getUser(userId) {
            let _this = this;
            _this.$ajax.get(process.env.VUE_APP_SERVER + "/user/user/getUser/" + userId).then(response => {
                let resp = response.data;
                if (resp.success) {
                    _this.hoverUser = resp.content;
                }
            })
        },
        back() {
            this.$router.go(-1);
        },
        /**
         * 加载点赞信息
         */
        loadLikes(postId) {
            let _this = this;
            // 查看文章都有谁点赞
            _this.$ajax.get(process.env.VUE_APP_SERVER + "/business/post/likes/loadLikes/" + postId).then(response => {
                let resp = response.data;
                if (resp.success) {
                    _this.likesList = resp.content;
                }
            })
            // 查看自己有没有点赞
            _this.$ajax.get(process.env.VUE_APP_SERVER + "/business/post/likes/getLikeStatus/" + _this.loginUser.id + "/" + postId).then(response => {
                let resp = response.data;
                if (resp.success) {
                    _this.like = resp.content === 1;
                }
            })
        },
        getPostDetail(postId) {
            let _this = this;
            _this.loginUser = Tool.getLoginUser();
            _this.$ajax.get(process.env.VUE_APP_SERVER + "/business/post/detail/" + postId).then((response) => {
                const resp = response.data;
                if (resp.success) {
                    _this.post = resp.content;
                    let MarkdownIt = require("markdown-it");
                    let md = new MarkdownIt();
                    let result = md.render(_this.post.content)

                    _this.post.content = result;
                    _this.ownBlog = (_this.post.userId === _this.loginUser.id);
                    _this.commentList = _this.post.commentList;
                    _this.comments = _this.post.comments;
                } else {
                    _this.$router.push("/error");
                }
            });
        },
        edit() {
            let _this = this;
            _this.$router.push({name: 'post/edit', params: {id: _this.post.id}})
        },
        deletePost() {
            let _this = this;
            Confirm.show("确认删除？", function () {
                _this.$ajax.delete(process.env.VUE_APP_SERVER + '/business/post/delete/' + _this.post.id).then(response => {
                    let resp = response.data;
                    if (resp.success) {
                        Toast.success("删除成功");
                        _this.$router.push("/post");
                    }
                })
            })
        },
        writeComment() {
            this.showReplyEditor = false;
            this.showCommentEditor = !this.showCommentEditor;
        },
        writeReply(parentId, name, parentCommentUserId) {
            let _this = this;
            _this.showCommentEditor = false;
            _this.showReplyEditor = true;
            _this.replyName = name;
            _this.reply.parentId = parentId;
            _this.replyUserId = parentCommentUserId;
        },
        /**
         * 点赞
         */
        clickLike() {
            let _this = this;
            _this.like = !_this.like;
            _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/post/likes/like', {
                userId: _this.loginUser.id,
                postId: _this.post.id,
                likeStatus: _this.like ? LIKE_STATUS.LIKE.key : LIKE_STATUS.CANCEL_LIKE.key
            }).then(response => {
                let resp = response.data;
                if (resp.success) {
                    console.log("点赞成功");
                    _this.likesList = resp.content;
                    // Toast.success("点赞成功");
                } else {
                    Toast.warning(resp.message);
                }
            })
            if (_this.like) {
                _this.sendMessage(_this.post.id, _this.post.userId, MESSAGE_TYPE.LIKE.key, '');
            }
        },
        sendMessage(postId, recUserId, type, content) {
            let _this = this;
            _this.$ajax.post(process.env.VUE_APP_SERVER + "/business/message/send", {
                postId: postId,
                type: type,
                sendUserId: _this.loginUser.id,
                content: content,
                recUserId: recUserId
            });
        },
        /**
         * 发布评论
         */
        publishComment() {
            let _this = this;
            _this.comment.userId = _this.loginUser.id;
            _this.comment.postId = _this.post.id;
            _this.comment.parentId = 0;
            _this.publish(_this.comment);
            _this.sendMessage(_this.post.id, _this.post.userId, MESSAGE_TYPE.COMMENT.key, _this.comment.content);
        },
        publishReply() {
            let _this = this;
            _this.reply.userId = _this.loginUser.id;
            _this.reply.postId = _this.post.id;
            _this.publish(_this.reply);
            _this.showReplyEditor = false;
            _this.sendMessage(_this.post.id, _this.replyUserId, MESSAGE_TYPE.REPLY.key, _this.reply.content);
        },
        publish(comment) {
            let _this = this;
            _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/post/comment/publish', comment).then(response => {
                let resp = response.data;
                if (resp.success) {
                    Toast.success("发布成功");
                    _this.comment = {};
                    _this.reply = {};
                    // 更新评论
                    _this.getCommentList();
                    // 更新评论数
                    _this.getComments();
                } else {
                    Toast.warning(resp.message);
                }
            })
        },
        getCommentList() {
            let _this = this;
            _this.$ajax.get(process.env.VUE_APP_SERVER + '/business/post/comment/commentList/' + _this.post.id).then(response => {
                let resp = response.data;
                if (resp.success) {
                    _this.commentList = resp.content;
                }
            })
        },
        getComments() {
            let _this = this;
            _this.$ajax.get(process.env.VUE_APP_SERVER + '/business/post/comments/' + _this.post.id).then(response => {
                let resp = response.data;
                if (resp.success) {
                    _this.comments = resp.content;
                }
            })
        }
    }
}
</script>

<style scoped>
.post {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
    width: 100%;
    min-height: 300px;
    padding: 20px 15px;
}

.thumb-i {
    font-size: 30px;
    margin: 20px 50px 20px 0
}

.comment-i {
    font-size: 30px;
}

.thumb-i:hover, .comment-i:hover {
    cursor: pointer;
}

.thumb-i:hover {
    color: red;
}

.photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.photo:hover {
    border: 2px solid rgb(217, 221, 225);
    cursor: pointer;
}

.card {
    width: 300px;
    right: 15px;
    z-index: 10001;
    position: relative;
    /*left: calc(i*50px);*/
}

.title-img {
    width: 35%;
    height: auto
}

.title-text {
    width: 65%
}

.half {
    width: 50%;
}

.flex {
    display: flex;
}

.bg-purple {
    background-color: rgba(174, 50, 255, 0.43);
}

.text-purple {
    color: rgba(174, 50, 255, 0.43);
}
.d1{
    /*display: inline-block;*/
}

</style>